<template>
  <div class="py-6">
    <div class="mb-6">
      <h1 class="text-2xl font-bold text-gray-900">统计分析</h1>
      <p class="mt-1 text-sm text-gray-500">查看系统运行数据和统计报表</p>
    </div>

    <!-- 统计概览 -->
    <div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4 mb-6">
      <div class="bg-white overflow-hidden shadow rounded-lg">
        <div class="px-4 py-5 sm:p-6">
          <div class="flex items-center">
            <div class="flex-shrink-0 bg-blue-100 rounded-md p-3">
              <i class="fa fa-file-text-o text-blue-600 text-xl"></i>
            </div>
            <div class="ml-4">
              <h3 class="text-sm font-medium text-gray-500">总工单数</h3>
              <p class="text-2xl font-semibold text-gray-900">128</p>
            </div>
          </div>
        </div>
      </div>

      <div class="bg-white overflow-hidden shadow rounded-lg">
        <div class="px-4 py-5 sm:p-6">
          <div class="flex items-center">
            <div class="flex-shrink-0 bg-green-100 rounded-md p-3">
              <i class="fa fa-check-circle-o text-green-600 text-xl"></i>
            </div>
            <div class="ml-4">
              <h3 class="text-sm font-medium text-gray-500">已完成</h3>
              <p class="text-2xl font-semibold text-gray-900">96</p>
            </div>
          </div>
        </div>
      </div>

      <div class="bg-white overflow-hidden shadow rounded-lg">
        <div class="px-4 py-5 sm:p-6">
          <div class="flex items-center">
            <div class="flex-shrink-0 bg-yellow-100 rounded-md p-3">
              <i class="fa fa-clock-o text-yellow-600 text-xl"></i>
            </div>
            <div class="ml-4">
              <h3 class="text-sm font-medium text-gray-500">平均处理时间</h3>
              <p class="text-2xl font-semibold text-gray-900">2.5小时</p>
            </div>
          </div>
        </div>
      </div>

      <div class="bg-white overflow-hidden shadow rounded-lg">
        <div class="px-4 py-5 sm:p-6">
          <div class="flex items-center">
            <div class="flex-shrink-0 bg-purple-100 rounded-md p-3">
              <i class="fa fa-thumbs-up text-purple-600 text-xl"></i>
            </div>
            <div class="ml-4">
              <h3 class="text-sm font-medium text-gray-500">客户满意度</h3>
              <p class="text-2xl font-semibold text-gray-900">96%</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 图表展示 -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
      <!-- 工单趋势图 -->
      <div class="bg-white shadow overflow-hidden sm:rounded-lg">
        <div class="px-4 py-5 sm:px-6">
          <h2 class="text-lg leading-6 font-medium text-gray-900">工单趋势</h2>
          <p class="mt-1 max-w-2xl text-sm text-gray-500">近30天工单数量统计</p>
        </div>
        <div class="border-t border-gray-200">
          <div class="p-6">
            <div class="h-64 flex items-center justify-center bg-gray-50 rounded-lg">
              <p class="text-gray-500">工单趋势图表展示区域</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 工单分类统计 -->
      <div class="bg-white shadow overflow-hidden sm:rounded-lg">
        <div class="px-4 py-5 sm:px-6">
          <h2 class="text-lg leading-6 font-medium text-gray-900">工单分类统计</h2>
          <p class="mt-1 max-w-2xl text-sm text-gray-500">各类工单占比</p>
        </div>
        <div class="border-t border-gray-200">
          <div class="p-6">
            <div class="h-64 flex items-center justify-center bg-gray-50 rounded-lg">
              <p class="text-gray-500">工单分类统计图表展示区域</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 详细统计 -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
      <!-- 员工绩效 -->
      <div class="bg-white shadow overflow-hidden sm:rounded-lg">
        <div class="px-4 py-5 sm:px-6">
          <h2 class="text-lg leading-6 font-medium text-gray-900">员工绩效</h2>
          <p class="mt-1 max-w-2xl text-sm text-gray-500">近30天员工处理工单情况</p>
        </div>
        <div class="border-t border-gray-200">
          <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
              <tr>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">员工</th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">处理工单数</th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">平均处理时间</th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">满意度</th>
              </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
              <tr>
                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">张三</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">42</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2.1小时</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">98%</td>
              </tr>
              <tr>
                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">李四</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">38</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2.8小时</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">95%</td>
              </tr>
              <tr>
                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">王五</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">36</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2.3小时</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">97%</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      <!-- 客户工单统计 -->
      <div class="bg-white shadow overflow-hidden sm:rounded-lg">
        <div class="px-4 py-5 sm:px-6">
          <h2 class="text-lg leading-6 font-medium text-gray-900">客户工单统计</h2>
          <p class="mt-1 max-w-2xl text-sm text-gray-500">活跃客户工单提交情况</p>
        </div>
        <div class="border-t border-gray-200">
          <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
              <tr>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">客户</th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">提交工单数</th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">未完成工单</th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">最近提交</th>
              </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
              <tr>
                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">客户A</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">12</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-08-12</td>
              </tr>
              <tr>
                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">客户B</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">8</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">0</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-08-10</td>
              </tr>
              <tr>
                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">客户C</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">6</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-08-08</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
</script>